<template>
  <div class="leftCart">
    <TopMenu></TopMenu>
    <ul v-if="dataSource.carts" class="goodsList">
      <li v-for="good in dataSource.carts" :key="good.id">
        <GoodsItem :goods="good" :index="good.index"></GoodsItem>
      </li>
    </ul>
    <div @click="goPayforAction()" class="confirmBtn">
      <span class="font10">￥</span>
      <span class="price">{{totalPrice}}</span>
      <span class="font10">去支付</span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import TopMenu from './TopMenu'
import GoodsItem from './GoodsItem'
export default {
  props: {
    dataSource: {
      type: Object
    }
  },
  data () {
    return {

    }
  },
  components: {
    TopMenu,
    GoodsItem
  },
  computed: {
    totalPrice: function () {
      var total = 0
      var goodsList = this.dataSource.carts
      if (goodsList) {
        console.log('left===', goodsList)
        goodsList.forEach((goods) => {
          total += goods.price * goods.count
        })
      }
      return total.toFixed(2)
    }
  },
  methods: {
    goPayforAction: function () {
      console.log('支付', this.totalPrice)
      var goodsList = this.dataSource.carts
      console.log('购物车商品：', goodsList)
    }
  }
}
</script>

<style lang="less">
  .leftCart .goodsList {
    padding: 0 0 64px;
  }
  .confirmBtn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: #6AA7E3;
    color: #fff;
    text-align: center;
    line-height: 44px;
  }
  .confirmBtn .price {
    font-size: 20px;
    font-weight: bold;
  }
</style>
